<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>四段第二天基础html5练习</title>
	</head>
	<style type="text/css">
		input[type="text"]::-webkit-input-placeholder{color: red;}
		input[type="checkbox"]{width: 50px;height: 50px;}
	</style>
	<body>
		<figure>
			<p>心如止水</p>
			<p>面如死灰</p>
			<img src="" alt="" />
		</figure>
			<meter value="15" min="1" max="10" low="5" high="6" optimum="7"></meter>	
			<progress value="5" min="1" max="10"></progress>
			
			<input type="text" placeholder="模糊信息" list="li"/>
			<datalist id="li">
				<option value="李国伟">李国伟</option>
				<option value="孙龙瑞">孙龙瑞</option>
				<option value="李志帅">李志帅</option>
			</datalist>
			<details open="open">
				
				<summary>dddddd</summary>
				<p>ccc</p>
				<p>ccc</p>
				
				
				
			</details>
			<p>李<ruby>国<rt>guo</rt></ruby>伟</p>
			<p>我太喜欢<mark>喜欢</mark>nininin</p>
			<form action="http//baidu.com" autocomplete="on">
			<input type="text" placeholder="模糊信息"/>
			<input type="checkbox" name="" id="" value="" />
			<input type="submit" value="提交"/>
			</form>
			  <div class="box1 box2 box3"></div>
			
			
	   <div id="box" class="box1" data-aaa="aa"></div>
	   
	   
        <label for="url">url:</label>
        <input type="url" id="url"><br>

        <label for="number">number:</label>
        <input type="number" id="number" min="1" max="10" step="0.5"><br>

        <label for="range">range:</label>
        <input type="range" id="range" min="1" max="10" step="3"><br>

        <label for="date">date:</label>
        <input type="date" id="date"><br>

        <label for="month">month:</label>
        <input type="month" id="month"><br>

	    <form action="http://baidu.com" method="GET">
        <label for="email">email:</label>
        <input type="email" id="email"><br>

        <label for="week">week:</label>
        <input type="week" id="week"><br>

        <label for="time">time:</label>
        <input type="time" id="time"><br>

        <label for="datetime-local">datetime-local:</label>
        <input type="datetime-local" id="datetime-local"><br>

        <label for="color">color:</label>
        <input type="color" id="color"><br>

        <input type="submit" value="提交">

    </form>
     <div contenteditable="true">阿打发放松放松·</div>
	</body>
	<script> 
		var meter11=document.querySelector("meter");
		console.log(meter11)
		console.log(meter11.getAttribute("low"))
		
		
		 var box = document.querySelector('.box1');
        console.log(box.classList);
        console.log(typeof box.classList);
        console.log(Array.isArray(box.classList));
     
        box.classList.add('box4');
        console.log(box.classList);
        box.classList.remove('box4');
        console.log(box.classList);
        box.classList.toggle('box3');
        console.log(box.classList);
        box.classList.toggle('box4');
        console.log(box.classList);
		
		 box.setAttribute('class','box1 box2');
        console.log(box.getAttribute('class'));
        console.log(box.dataset.aaa);
        box.dataset.aaa = 'bbb';
        console.log(box.dataset.aaa);
        box.dataset.bbb = 'bbb';
        console.log(box.dataset.bbb);
	</script>
</html>
